<template>
  <middle-area-htree>
    <div slot="middle-top" class="left-top">
      <ul>
        <li><a href="#"><h3 >纪录片</h3></a></li>
        <li><a href="#"><p>辣子曰</p></a></li>
        <li><div></div></li>
        <li><a href="#"><p>生门.纪实剧</p></a></li>
        <li><div></div></li>
        <li><a href="#"><p>中国医生</p></a></li>
        <li><div></div></li>
        <li><a href="#"><p>地球动脉</p></a></li>
        <li><div></div></li>
        <li><a href="#"><p>恐龙星球</p></a></li>
        <li><div></div></li>
        <li><a href="#"><p>更多>></p></a></li>
      </ul>
    </div>
    <div slot="middle-bot" class="left-bot">
      <ul class="ul">
        <li v-for="item,index in moviehot" :key="index" @click="minvideo(item.id)">
          <div class="middle-img">
            <img :src="item.imgUrl" alt="">
            <a href="#"><h5>{{item.name}}</h5></a>
            <p>{{item.director}}</p>
          </div>
        </li>
      </ul>
    </div>
  </middle-area-htree>
</template>

<script>
import MiddleAreaHtree from './MiddleAreaHtree'
import {getMovieList} from '@/api/movie'
export default {
  name:'MiddleAreaHtreeItem',
  components:{
    MiddleAreaHtree
  },
  data(){
    return{
      moviehot:[]
    }
  },
  created(){
    getMovieList({}).then(res=>{
      let data = res.data
      // console.log(data)
      this.moviehot = data.data.list.slice(0,7)
    })
  },
  methods:{
    minvideo(id){
      this.$router.push({path:'/playarea',query:{id:id}})
    }
  }
}
</script>

<style scoped>
  .left-top{
    display: flex;
    justify-content: space-between;
  }
  .left-top ul{
    width: 800px;
    margin-left: 10px;
    display: flex;
    justify-content: space-evenly;
  }
  .left-top ul h3{
    color: #fff;
    padding-top: 10px;
  }
  .left-top p{
    font-size: 15px;
    padding-top: 20px;
    /* margin-left: 20px; */
    color: rgba(100, 100, 100, .7);
  }
   .left-top ul div{
    height: 15px;
    margin-top: 25px;
    border: 1px solid rgba(100, 100, 100, .3);
  }


  .left-bot ul{
    display: flex;
    justify-content: space-evenly;
  }
  .ul{
    width: 100%px;
    /* height: 300px; */
    margin-left: 20px;
    margin-bottom: 0;
    display: flex;
    overflow: hidden;
  }
  .ul h5{
    margin-bottom: 0;
    padding-top: 5px;
    color: #fff;
  }
  .ul p{
    margin-bottom: 0;
  }
  .ul li{
    margin-right: 20px;

  }
  .middle-img img{
    width: 170px;
    height:260px;
    border-radius: 5px;
  }
</style>
